<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-table :columns="columns" :dataSource="data" :pagination="false"
               size="middle">
        <template v-for="(col, i) in ['placeName','entryTime', 'entryReason','status']" :slot="col" slot-scope="text, record, index">
          <a-tooltip :defaultVisible="false">
            <a-input :key="col" v-if="record.editable" style="margin: -5px 0"
                     :value="text"
                     :placeholder="columns[i].title"/>
            <template v-else>{{ text }}</template>
          </a-tooltip>
        </template>
      </a-table>
    </a-spin>
  </a-modal>
</template>
<script>
  import {httpAction, getAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import {validateDuplicateValue} from '@/utils/util'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  export default {
    name: "SdxcReserveUserModal",
    components: {
      JDictSelectTag,
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: "操作",
        width: 1000,
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        columns: [
          {
            title: '预约场地',
            dataIndex: 'placeName',
            key: 'placeName',
            width: '25%',
            scopedSlots: {customRender: 'placeName'}
          },
          {
            title: '预约入场时间',
            dataIndex: 'entryTime',
            key: 'entryTime',
            width: '25%',
            scopedSlots: {customRender: 'entryTime'}
          },
          {
            title: '入场事由',
            dataIndex: 'entryReason',
            key: 'entryReason',
            width: '18%',
            scopedSlots: {customRender: 'entryReason'}
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: '16%',
            scopedSlots: {customRender: 'status'}
          },
        ],
        data: [],
        url: {
          queryReserveListByUserId: "/reserve/sdxcReserveUser/queryReserveListByUserId",
        }
      }
    },
    created() {
    },
    methods: {
// 根据用户id查询预约记录列表
      edit(record) {
        this.data = [];
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        if (this.model.id) {
          let params = {id: this.model.id};
//初始化测试方法列表
          getAction(this.url.queryReserveListByUserId, params).then((res) => {
            if (res.success) {
              var key = 1;
              res.result.forEach(reserve => {
                var method = {
                  key: (key++) + "",
                  editable: false,
                  placeName: reserve.placeName,
                  entryTime: reserve.entryTime,
                  entryReason: reserve.entryReason,
                  healthUrl: reserve.healthUrl,
                  status: reserve.status === 1 ? "审核通过" : (reserve.status === 2 ? "审核中" : "审核不通过"),
                }
                this.data.push(method);
              });
              this.$forceUpdate()
            }
          })
        }
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        this.close()
      },
      handleCancel() {
        this.close()
      },
    }
  }
</script>